<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>收藏排行榜</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/ranking-list.css">
    <script src="js/jquery-3.3.1.js"></script>

    <script src="js/include.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/axios-0.19.0.js"></script>

    <!--分页插件-->
    <link rel="stylesheet" href="css/zpageNav.css">
    <script src="js/zpageNav.js"></script>
</head>
<body>
<!--引入头部-->
<header id="header"></header>
<div class="contant" id="app">
    <div class="shaixuan">
        <span>线路名称</span>
        <input type="text" v-model="rname">
        <span>金额</span>
        <input type="number" v-model="pMin">~<input type="number" v-model="pMax">
        <button type="button" @click="changePage(pageInfo.pageNum)">搜索</button>
    </div>
    <div class="list clearfix">
        <ul>
            <li v-for="route in pageInfo.list">
                <span class="num one">1</span>
                <a href="route_detail.html"><img :src="route.rimage" alt=""></a>
                <h4><a href="route_detail.html">{{route.rname}}</a></h4>
                <p>
                    <b class="price">&yen;<span>{{route.price}}</span>起</b>
                    <span class="shouchang">已收藏{{route.num}}次</span>
                </p>
            </li>
        </ul>
    </div>
    <div>
        <!--  page:当前页
       total:总记录数
       page-size:页面的大小
       maxPage:设置展现数字的个数-->
        <zpage-nav :page="pageInfo.pageNum" :total="pageInfo.total" :page-size="pageInfo.pageSize"
                   :max-page="10" @pageHandler="changePage"></zpage-nav>
    </div>
</div>
<script>
    new Vue({
            el:"#app",
            data:{
                pMin:"",
                pMax:"",
                rname: "",
                RouteList: [],
                pageInfo:{}
            },
            methods:{
                getCollection(){
                    axios.post(`collection/findCollection?pMin=${this.pMin}&pMax=${this.pMax}&rname=${this.rname}`)
                         .then(response => {
                            let RouteList = response.data;
                            this.RouteList=RouteList;
                          })
                          .catch(error=>{
                              console.log(error)
                              alert("服务器忙...");
                          });
                },
                changePage(pageNum){
                    //分页请求要准备2个数据：cid和pageNum
                    axios.get(`route/findByPage?pageNum=${pageNum}&pMin=${this.pMin}&pMax=${this.pMax}&rname=${this.rname}`)
                        .then(response => {
                            this.pageInfo= response.data;
                        })
                        .catch(error=>{
                            console.log(error)
                            alert("服务器忙...");
                        });
                }
            },
            created(){
                //this.getCollection();
                this.changePage(1);
            }
        })
</script>
<!--导入底部-->
<footer id="footer"></footer>
</body>
</html>